import { getMainCanvasSize } from './imagePreview.js';

const pixelPreview = document.querySelector('#pixel-preview');
const pixelPreviewImg = document.querySelector('#pixel-preview-img');
const colorInfoText = document.querySelector('#color-info-text');

// 展示并移动预览面板至鼠标位置
export const showPanel = (clientX, clientY) => {
  pixelPreview.classList.remove('hidden');
  // pixelPreview.style.left = `${clientX - 60}px`;
  // pixelPreview.style.top = `${clientY - 60}px`;
  pixelPreview.style.transform = `translate(${clientX - 60}px, ${clientY - 60}px)`;
};

export const hidePanel = () => {
  pixelPreview.classList.add('hidden');
};

export const isValidPosition = (x, y) => {
  const { width, height } = getMainCanvasSize();
  return x >= 0 && x < width && y >= 0 && y < height;
};

export const setPixelInfo = (image, pixelInfo) => {
  const {
    r,
    g,
    b,
    hex,
  } = pixelInfo;

  pixelPreviewImg.src = image;
  colorInfoText.innerHTML = `R:${r} G:${g} B:${b} ${hex}`;
}
